<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>蓝桥篮球队出场名单</title>
		<script src="js/vue.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="./css/animation.css">
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div id="app">
			<h1 v-if="showH1">蓝桥队首发阵容登场!</h1>
			<div class="carousel" :style="carouselStyle">
				<el-carousel :interval="3000" type="card" height="400px">
					<el-carousel-item v-for="(item, index) in selectedPlayer" :key="index">
						<el-image class="carouselImage" :src="item.src" fit="fill">
						</el-image>
						<div class="intro">
							<div class="name">{{item.label}}</div>
							<div class="position">{{item.position}}</div>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="form" :style="formStyle">
				<h3>蓝桥篮球队首发出场阵容</h3>
				<el-transfer v-model="keyArr" @change="playerChange" :button-texts="btx" :titles="titles"
					target-order="push" :data="player"></el-transfer>
				<button class="submit" @click="submit">首发出场</button>
			</div>
		</div>
	</body>
	<script src="./js/player.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				btx,
				titles,
				player,
				formStyle: {},
				carouselStyle: {},
				keyArr: [],
				showH1: false,
				selectedPlayer: []
			},
			methods: {
				submit() {
					if (this.selectedPlayer.length != 5) {
						this.$message({
							message: '注意！篮球队必须5个人参赛！请重选！',
							type: 'warning'
						});
					} else {
						this.formStyle = {
							animation: "scale_from 0.8s forwards"
						}
						this.carouselStyle = {
							animation: "carousel_from 0.8s forwards"
						}
						this.showH1 = true;
					}
				},
				playerChange(val) {
					this.selectedPlayer = val.map(index => {
						return this.player[index]
					})
				}
			}
		});
	</script>
	<script src="./js/waveBtn.js"></script>
</html>
